<template>
  <div>
    <!-- 姓名 -->
    <n-card :bordered="false" title="">
      <!-- 快速搜索 -->
      <div class="">
        <!-- <n-button type="info" @click="in_info">
          在职人员
        </n-button>
        <n-button type="info" @click="dimission_info" style="margin-left: 10px;">
          离职人员
        </n-button> -->
        <n-button type="info" @click="user_add" style="margin-left: 10px;">
          分类添加
        </n-button>
        
       <!-- <n-button type="info" @click="user_exl" style="margin-left: 10px;">
          导出全部
        </n-button>
        <n-button type="info" @click="user_exl_checked" style="margin-left: 10px;">
          批量导出
        </n-button> -->
        <n-button type="info" @click="user_search"  style="margin-left: 10px;">
          搜索
        </n-button>
        <n-button type="info" @click="shuaxin" style="margin-left: 10px;">
        重置
        </n-button>
         <n-button type="error" @click="user_dels" style="margin-left: 10px;">
           批量删除
         </n-button>
            
       
      </div>
<div v-show="falsess">
 <n-input v-model:value="userinfo_alert.id_number"  style="width: 180px;height: 34px;margin-top: 10px;"
   placeholder="暂未开发完毕" />
</div>

      <!-- 页面显示的 表格 -->
       <!-- <div style="display: none;"> -->
        <n-data-table :columns="columns" id="lists777"  :row-key="rowKey"
    @update:checked-row-keys="handleCheck" :pagination="pagination" :data="user_info" striped style="margin-top: 2rem;" />
     <!-- </div> -->
    <!-- 全部导出的表格 -->
    <div style="display: none;">
    <n-data-table :columns="columns_all" id="list_all"  
    :data="user_info_all" />
    </div>
   <!-- 选中状态导出 -->
  <div style="display: none;">
   <n-data-table :columns="columns_all" id="list_checked"  
   :data="user_info_ckd" />
   </div>
     
      <!-- 详情 弹窗  开始-->
      <n-modal v-model:show="showModal" :mask-closable="false" preset="dialog" title="个人信息详情"
        style="width:960px;height: 550px;">
        <n-form ref="formRef" :model="model" :rules="rules" label-placement="left"
          require-mark-placement="right-hanging" :size="size" :style="{
      maxWidth: '960px'
    }">
          <div style="display: flex;flex-wrap: wrap;justify-content: space-between;">
            <n-form-item label="姓名 :" path="inputValue" :label-width="110">
              <n-input v-model:value="userinfo_alert.name" :readonly="true" style="width: 180px;height: 34px;"
                placeholder="姓名" />
            </n-form-item>

            <n-form-item label="姓别 :" :label-width="110">
              <n-input v-model:value="userinfo_alert.sex_" :readonly="true" style="width: 180px;height: 34px;"
                placeholder="姓别" />
            </n-form-item>

            <n-form-item label="民族 :" :label-width="110">
              <n-input v-model:value="userinfo_alert.national" :readonly="true" style="width: 180px;height: 34px;"
                placeholder="" />
            </n-form-item>


            <n-form-item label="身份证号 :" :label-width="110">
              <n-input v-model:value="userinfo_alert.id_number" :readonly="true" style="width: 180px;height: 34px;"
                placeholder="" />
            </n-form-item>

            <n-form-item label="出生年月 :" :label-width="110">
              <n-input v-model:value="userinfo_alert.birth_date" :readonly="true" style="width: 180px;height: 34px;"
                placeholder="" />
            </n-form-item>

            <n-form-item label="年龄 :" :label-width="110">
              <n-input v-model:value="userinfo_alert.age" :readonly="true" style="width: 180px;height: 34px;"
                placeholder="" />
            </n-form-item>

            <n-form-item label="政治面貌 :" :label-width="110">
              <n-input v-model:value="userinfo_alert.landscape" :readonly="true" style="width: 180px;height: 34px;"
                placeholder="" />
            </n-form-item>

            <n-form-item label="电话 :" :label-width="110">
              <n-input v-model:value="userinfo_alert.tel" :readonly="true" style="width: 180px;height: 34px;"
                placeholder="" />
            </n-form-item>

            <n-form-item label="学历 :" :label-width="110">
              <n-input v-model:value="userinfo_alert.education" :readonly="true" style="width: 180px;height: 34px;"
                placeholder="" />
            </n-form-item>

            <n-form-item label="所在项目 :" :label-width="110">
              <n-input v-model:value="userinfo_alert.pname" :readonly="true" style="width: 180px;height: 34px;"
                placeholder="" />
            </n-form-item>

            <n-form-item label="毕业时间 :" :label-width="110">
              <n-input v-model:value="userinfo_alert.graduation_date" :readonly="true"
                style="width: 180px;height: 34px;" placeholder="" />
            </n-form-item>

            <n-form-item label="毕业学校 :" :label-width="110">
              <n-input v-model:value="userinfo_alert.school" :readonly="true" style="width: 180px;height: 34px;"
                placeholder="" />
            </n-form-item>
            
            <n-form-item label="所学专业 :" :label-width="110">
              <n-input v-model:value="userinfo_alert.major" :readonly="true" style="width: 180px;height: 34px;"
                placeholder="" />
            </n-form-item>

            <n-form-item label="所在公司 :" :label-width="110">
              <n-input v-model:value="userinfo_alert.qname" :readonly="true" style="width: 180px;height: 34px;"
                placeholder="" />
            </n-form-item>

            <n-form-item label="入职时间 :" :label-width="110">
              <n-input v-model:value="userinfo_alert.entry_time" :readonly="true" style="width: 180px;height: 34px;"
                placeholder="" />
            </n-form-item>

            <n-form-item label="参加工作时间 :" :label-width="110">
              <n-input v-model:value="userinfo_alert.worker_date" :readonly="true" style="width: 180px;height: 34px;"
                placeholder="" />
            </n-form-item>

            <!-- 通过条件判断，动态数据显示 -->
            <!-- <div v-if="userinfo_alert.sex_=='男'">
                                              <n-form-item label="所在档级 :"  :label-width="110">
                                                <n-input v-model:value="userinfo_alert.worker_date"  :readonly="true" style="width: 180px;height: 34px;" placeholder="" />
                                              </n-form-item>
                                           </div> -->

            <n-form-item label="工作岗位 :" :label-width="110">
              <n-input v-model:value="userinfo_alert.jobs" :readonly="true" style="width: 180px;height: 34px;"
                placeholder="" />
            </n-form-item>

            <n-form-item label="用工形式 :" :label-width="110">
              <n-input v-model:value="userinfo_alert.labor_type_" :readonly="true" style="width: 180px;height: 34px;"
                placeholder="" />
            </n-form-item>

            <n-form-item label="人员状态 :" :label-width="110">
              <n-input v-model:value="userinfo_alert.status_" :readonly="true" style="width: 180px;height: 34px;"
                placeholder="" />
            </n-form-item>

            

            <n-form-item label="所在档级 :" :label-width="110">
              <n-input v-model:value="暂无数据" :readonly="true" style="width: 180px;height: 34px;" placeholder="暂无接口数据" />
            </n-form-item>

            <n-form-item label="档级调整时间 :" :label-width="110">
              <n-input v-model:value="暂无数据" :readonly="true" style="width: 180px;height: 34px;" placeholder="暂无接口数据" />
            </n-form-item>
            
            <n-form-item label="家庭住址 :" :label-width="110">
              <n-input v-model:value="userinfo_alert.address" :readonly="true" style="width: 400px;height: 34px;"
                placeholder="" />
            </n-form-item>

          </div>


        </n-form>
      </n-modal>
      <!-- 详情 弹窗  结束-->
      <!--  编辑 弹窗  开始-->
      <n-modal v-model:show="showModal_redact" :mask-closable="false" preset="dialog" title="个人信息编辑"
        style="width:500px;height: 180px;">
        <n-form ref="formRef_redact" :model="model_redact" :rules="rules_redact" label-placement="left"
          label-width="auto" require-mark-placement="right-hanging" :size="size" :style="{
      maxWidth: '500px'
    }">
          <div style="display: flex;flex-wrap: wrap;justify-content: space-between;">
            <n-form-item label="姓名 :" path="inputValue" :label-width="110">
              <n-input v-model:value="model_redact.inputValue" @input="redact_input" style="width: 180px;height: 34px;"
                placeholder="" />
            </n-form-item>

        

          </div>
          <div style="display: flex; justify-content: flex-end">
            <n-button style="margin-right: 10px;" round type="tertiary" >
              取消
            </n-button>
            <n-button round type="primary" @click="handleValidateButtonClick_redact"> 确认
            </n-button>
          </div>
        </n-form>
      </n-modal>
      <!-- 编辑 弹窗  结束-->
      <!--  人员添加 弹窗  开始-->
          <n-modal v-model:show="showModal_add" :mask-closable="false" preset="dialog" title="合同分类新增"
            style="width:500px;height:180px;">
            <n-form ref="formRef_add" :model="model_add" :rules="rules_redact" label-placement="left"
              label-width="auto" require-mark-placement="right-hanging" :size="size" :style="{
          maxWidth: '500px'
        }">
            
                <n-form-item label="分类名称 :" path="inputValue" :label-width="110">
                  <n-input v-model:value="model_add.inputValue"  style="width: 220px;height: 34px;"
                    placeholder="请输入" />
                </n-form-item>
      
           
              <div style="display: flex; justify-content: flex-end">
                <n-button style="margin-right: 10px;" @click="handleValidateButtonClick_add_cel" round type="tertiary" >
                  取消
                </n-button>
                <n-button round type="primary" @click="handleValidateButtonClick_add"> 确认
                </n-button>
              </div>
            </n-form>
          </n-modal>
          <!-- 人员添加 弹窗  结束-->
    </n-card>
  </div>
</template>

<script>
  // 导入依赖
 import XLXS from "xlsx";
 import FileSaver from "file-saver";
  import qs from 'qs';
  import axios from 'axios';
  import {
    h,
    defineComponent
  } from "vue";
  import {
    NTag,
    NButton,
    useMessage
  } from "naive-ui";
  import {
    NTooltip,
    NGradientText
  } from 'naive-ui'
  import {
    onMounted,
    reactive,
    toRefs,
    ref,
  } from 'vue';
  export default {
    setup() {
const createColumns_columns_all = () => {
  return [
    {
      title: "姓名",
      key: "name"
    },
    {
      title: "性别",
      key: "sex"
    },
    {
      title: "民族",
      key: "national"
    },
    {
      title: "政治面貌",
      key: "landscape"
    },
    {
      title: "出生年月",
      key: "birth_date"
    },
    {
      title: "年龄",
      key: "age"
    },
    {
      title: "身份证号",
      key: "id_number"
    },
    {
      title: "电话",
      key: "tel"
    },
    {
      title: "住址",
      key: "address"
    },
    {
      title: "参加工作时间",
      key: "worker_date"
    },
    {
      title: "学历",
      key: "education"
    },
    {
      title: "毕业院校",
      key: "school"
    },
    {
      title: "所学专业",
      key: "major"
    },
    {
      title: "毕业时间",
      key: "graduation_date"
    },
    {
      title: "所在公司",
      key: "qname"
    },
    {
      title: "所在项目",
      key: "pname"
    },
    {
      title: "入职时间",
      key: "entry_time"
    },
    {
      title: "工作岗位",
      key: "jobs"
    },
    {
      title: "用工形式",
      key: "labor_type"
    },
    {
      title: "人员状态",
      key: "status"
    }
  ];
};
      function fun() {
        axios({
            method: "post", //请求方式
            url: "/api/api/contracttype/index", //url
            data: qs.stringify({
              // 参数
            admin_id:'1',
            admin_name:'1'
            }),
          }).then(response => {
            console.log(response.data, '合同分类列表数据');
            data_.user_info = response.data.data;
            data_.user_info_all = response.data.info;
          
          })
          .catch(function(error) { // 请求失败处理
            console.log(error);
          });
      };

      function user_detail(userid) { //用户详情按钮
      console.log(userid,'useridd')
        axios({
            method: "post", //请求方式
            url: "/api/Staff/click_edit", //url
            data: qs.stringify({
              // 参数
              id: userid,
            }),
          }).then(response => {
            console.log(response.data.info, '用户详情信息');
            showModalRef.value = true;
            if (response.data.info.sex == 1) {
              response.data.info.sex_ = '男'
            } else {
              response.data.info.sex_ = '女'
            };
            if (response.data.info.status == 1) {
              response.data.info.status_ = '在职'
            } else {
              response.data.info.status_ = '离职'
            };
            if (response.data.info.labor_type == 1) {
              response.data.info.labor_type_ = '学员'
            } else if (response.data.info.labor_type == 2) {
              response.data.info.labor_type_ = '短期派遣'
            } else {
              response.data.info.labor_type_ = '长期派遣'
            };
           
            data_.userinfo_alert = response.data.info; //用户信息 弹窗内容
             console.log(data_.userinfo_alert,'用户信息 弹窗内容');
          })
          .catch(function(error) { // 请求失败处理
            console.log(error);
          });
      };

      function user_redact(username,ids) { //用户编辑按钮
      
       console.log(username);
       model_redact.inputValue=username;
        model_redact.id=ids;
        showModalRef_redact.value = true;
        // axios({
        //     method: "post", //请求方式
        //     url: "/api/api/contracttype/add", //url
        //     data: qs.stringify({
        //       // 参数
        //       id: userid,
        //       admin_id:'1',			//当前操作人员id
        //      admin_name:'1'		//当前操作人员姓名

        //     }),
        //   }).then(response => {
        //     console.log(response.data, '合同分类信息');
            
        //     showModalRef_redact.value = true;
           
        //   })
        //   .catch(function(error) { // 请求失败处理
        //     console.log(error);
        //   });
      };
     
function user_del(userid){
  if(userid.length==0){
      message.warning('请选中需要删除的人')
  }else{
     axios({
       method: "post", //请求方式
       url: "/api/api/contracttype/del", //url
       data: qs.stringify({
         // 参数
         id: userid,
         admin_id:'1',
         admin_name:'1'
       }),
     }).then(response => {
       console.log(response, '合同分类是否删除成功');
       if(response.data.code==1){
         
           fun();
       }
     
     })
     .catch(function(error) { // 请求失败处理
       console.log(error);
     });
         
  };
   // console.log(userid,'useridd');
   //  console.log(userid.length,'useridd长度');
  
   
};
      function redact_userinfo() {
        
        // let c='130503670401001';
        //  console.log(c.length);
        // 根据省份证 生成 出生年月及年龄
      //   let now_date = new Date();
      //   let birth_y = '';
      //   let birth_m = '';
      //   let birth_d = '';
      //   let birth_y_ = '';
      //   let birth_data = '';
      //   let age = '';
      //   if (model_redact.id_number.length == 18) {
      //     birth_y = model_redact.id_number.substr(6, 4);
      
      //     birth_m = model_redact.id_number.substr(10, 2);
        
      //     birth_d = model_redact.id_number.substr(12, 2);
      
      //     birth_data = `${birth_y}-${birth_m}-${birth_d}`;
        
      //     now_date = new Date();
      //     age = String(now_date.getFullYear() - birth_y); //获取完整的年份(4位)
       
      //   } else if (model_redact.id_number.length == 15) {
        
      //     birth_y = model_redact.id_number.substr(6, 2);
      
      //     birth_m = model_redact.id_number.substr(8, 2);
       
      //     birth_d = model_redact.id_number.substr(10, 2);
        
      //     birth_data = `19${birth_y}-${birth_m}-${birth_d}`;
        
      //     now_date = new Date();
      //     birth_y_ = `19${birth_y}`
      //     age = String(now_date.getFullYear() - birth_y_); //获取完整的年份(4位)
       
      //   };
      //   // 下拉框  内容判断   赋值
      //   let labor_type_s='';//用工形式
      //    let status_s='';//人员状态
      //   if(model_redact.labor_type_=='学员'){
      //     labor_type_s=1;
      //   }else if(model_redact.labor_type_=='短期派遣'){
      //      labor_type_s=2;
      //   }else if(model_redact.labor_type_=='长期派遣'){
      //      labor_type_s=3;
      //   };
      //   if(model_redact.status_=='在职'){
      //     status_s=1;
      //   }else if(model_redact.status_=='离职'){
      //      status_s=2;
      //   };
        // console.log(model_redact.inputValue);
        // console.log(model_redact.radioGroupValue);
        // console.log(model_redact.national);
        // console.log(model_redact.landscape);
        // console.log(birth_data);
        // console.log(age);
        // console.log(model_redact.id_number);
        // console.log(model_redact.tel);
        // console.log(model_redact.address);
        // console.log(model_redact.worker_date);
        // console.log(model_redact.education);
        // console.log(model_redact.school);
        // console.log(model_redact.graduation_date);
        // console.log(model_redact.entry_time);
        // console.log(model_redact.jobs,'tyu');
        // console.log(labor_type_s);
        // console.log(model_redact.id);
        // console.log(status_s);
        // console.log();
        // console.log();
           // console.log(model_redact.inputValue,'3456');
       axios({
           method: "post", //请求方式
           url: "/api/api/contracttype/add", //url
           data: qs.stringify({
             // 参数
             id:model_redact.id,
             name:model_redact.inputValue,
             admin_id:'1',			//当前操作人员id
            admin_name:'1'		//当前操作人员姓名
       
           }),
         }).then(response => {
           console.log(response.data, '合同分类编辑');
           if(response.data.code==1){
             fun();
               showModalRef_redact.value = false;
               
           }
           // showModalRef_redact.value = true;
          
         })
         .catch(function(error) { // 请求失败处理
           console.log(error);
         });
      };
     function  add_userinfo(){
    
     
          axios({
              method: "post", //请求方式
              url: "/api/api/contracttype/add", //url
              data: qs.stringify({
                // 参数
                name:model_add.inputValue,
                admin_id:'1',			//当前操作人员id
                admin_name:'1'		//当前操作人员姓名

              }),
            }).then(response => {
              console.log(response, '合同分类添加是否成功');
              if(response.data.code==1){
                  message.success("合同分类添加成功");
                    showModalRef_add.value=false;
                    model_add.inputValue=null;
                fun();
              }else{
                  message.error("添加失败，请重试");
              }
              // data_.user_info=response.data.info;
            })
            .catch(function(error) { // 请求失败处理
              console.log(error);
            });
        };
      onMounted(() => {
        fun();
      });
      const message = useMessage();
      const showModalRef = ref(false); //用户详情弹框
      const showModalRef_redact = ref(false); //用户编辑弹框
        const showModalRef_add = ref(false); //用户添加弹框
      const formRef = ref(null); //用户详情弹框 ---表单
      const formRef_redact = ref(null); //用户编辑弹框---表单
 const formRef_add = ref(null); //用户添加弹框---表单
      const createColumns = ({
        sendMail_1,
        sendMail_2,
        sendMail_3
      }) => {
        return [{
            type: 'selection'
          },
          {
            title: '分类名称',
            key: 'name',

            // title (column) {
            //        return h(
            //          NGradientText,
            //          {
            //            // size: '18',
            //            // type: 'info'
            //          },
            //          { default: () => '姓名' }
            //        )
            //      }


          },

          {
            title: '创建时间',
            key: 'create_time'
          },
          {
            title: '更新时间',
            key: 'update_time'
          },
          // {
          //   title: '联系电话',
          //   key: 'tel'
          // },
          // {
          //   title: '所在公司',
          //   key: 'qname'
          // },
          // {
          //   title: '所在项目',
          //   key: 'pname'
          // },
          // {
          //   title: '工作岗位',
          //   key: 'jobs'
          // },
          // {
          //   title: '用工形式',
          //   key: 'labor_type'
          // },

          // {
          //     // <!-- 通过条件判断，动态数据显示 -->
          //   title:data_.user_status==2?'工作状态':'',
          //    key:data_.user_status==2?'status':''

          // },
          // {

          //   title: '人员状态',
          //   key: 'status'
          // },
          // {
          //   title: "操作",
          //   key: "actions",
          //   // align:"right",
          //   titleColSpan: data_.user_status == 4 ? 1 : 3,
          //   width: 1,
          //   render(row) {
          //     return h(NButton, {
          //       size: "small",
          //       color: 'green',
          //       // align:"center",
          //       onClick: () => sendMail_1(row)
          //     }, {
          //       default: () => "详情"
          //     });

          //   },

          // },
          {
            title: "操作",
            width: 1,
            titleColSpan:2,
            key: "status",
            render(row) {
              return h(NButton, {
                size: "small",
                // color: 'blue',
                type:'info',
                // disabled: row.status == '在职' ? false : true,
                // secondary:true,
                // disabled:data_.user_status==4&&row.status==在职?true:false,
                text: data_.user_status == 4 ? true : false,
                onClick: () => sendMail_2(row)
              }, {
                default: () => {
                  if (data_.user_status != 4) {
                    return '编辑'
                  } else if (data_.user_status == 4) {
                    return ''
                  }
                }
              });
            },
          },
          {
            title: "",
            width: 1,
            key: "actions",
            render(row) {
              return h(NButton, {
                size: "small",
                // color: 'red',
                 type:'error',
                // secondary:true,
                disabled: data_.user_status == 4 ? true : false,
                text: data_.user_status == 4 ? true : false,
                onClick: () => sendMail_3(row)
              }, {
                default: () => {
                  if (data_.user_status != 4) {
                    return '删除'
                  } else if (data_.user_status == 4) {
                    return ''
                  }
                }
              });
            },
          }
        ];
      };
      const model_redact = reactive({
      
          major:null,
        project_id: '',
        id: '',
        qid: '',
        inputValue: null,
        radioGroupValue: '',
        national: null,
        id_number: null,
        landscape: null,
        tel: null,
        education: null,
        pname: null,
        graduation_date: null,
        school: null,
        qname: null,
        entry_time: null,
        worker_date: null,
        jobs: null,
        labor_type_: null,
        labor_type_select: '',
        status_select: '',
        status_: null,
        address: null,
      });
      const model_add = reactive({
        major:null,
        project_id: '',
        id: '',
        qid: '',
        inputValue: null,
        radioGroupValue: '',
        national: null,
        id_number: null,
        landscape: null,
        tel: null,
        education: null,
        pname: null,
        graduation_date: null,
        school: null,
        qname: null,
        entry_time: null,
        worker_date: null,
        jobs: null,
        labor_type_: null,
        labor_type_select: '',
        status_select: '',
        status_: null,
        address: null,
      });
      const data_ = reactive({
          falsess:false,
        user_add:()=>{
          showModalRef_add.value=true;
        },
        shuaxin:()=>{
         fun()
        },
        user_search:()=>{
            data_.falsess=! data_.falsess;
        },
        dimission_info:()=>{
          // data_.user_info=[];
          let arr = [];
          for (let i = 0; i < data_.user_info_all.length; i++) {
          	if (data_.user_info_all[i].status.indexOf('离职') >= 0 ) {
          		arr.push(data_.user_info_all[i]);
          	}
          };
          data_.user_info=arr;
        },
        in_info:()=>{
          // data_.user_info=[];
          let arr = [];
          for (let i = 0; i < data_.user_info_all.length; i++) {
          	if (data_.user_info_all[i].status.indexOf('在职') >= 0 ) {
          		arr.push(data_.user_info_all[i]);
          	}
          };
          data_.user_info=arr;
        },
        userinfo_ss: '',
        userinfo_alert: [], //用户信息 弹窗内容
        user_status: 2, //登陆者权限  认证
        user_info_all:[],
        user_info_ckd:[],
        user_info: [
          // {
          //   key: 0,
          //   name: 'John Brown',
          //   age: 32,
          //   address: 'New York No. 1 Lake Park'
          // },
          // {
          //   key: 1,
          //   name: 'Jim Green',
          //   age: 42,
          //   address: 'London No. 1 Lake Park'
          // },
          // {
          //   key: 2,
          //   name: 'Joe Black',
          //   age: 32,
          //   address: 'Sidney No. 1 Lake Park'
          // }
        ]

      });
      // const model_redact= reactive({
      //           inputValue: 2345,
      //           textareaValue: null,
      //           selectValue: null,
      //           multipleSelectValue: null,
      //           datetimeValue: null,

      //           }),

      const paginationReactive = reactive({
        page: 1,
        pageSize: 5,
        showSizePicker: true,
        pageSizes: [3, 5, 7, 10],
        onChange: (page) => {
          paginationReactive.page = page;
        },
        onUpdatePageSize: (pageSize) => {
          paginationReactive.pageSize = pageSize;
          paginationReactive.page = 1;
        }
      });
  const checkedRowKeysRef = ref([]);  //表格复选框  
      return {
        columns_all: createColumns_columns_all(),
      
        rowClassName(row) {

          return console.log(row, 'row');
        },
           checkedRowKeys: checkedRowKeysRef, //表格复选框  
             rowKey: (row) => row.id,
                 handleCheck(rowKeys) {
                   checkedRowKeysRef.value = rowKeys;
                   console.log(rowKeys,'1234567890-=复选框 id');
                   data_.user_info_ckd=[];
                   
                   // for(let i=0;i<data_.user_info_all.length;i++){
                   // for(let j=0;j<checkedRowKeysRef.value.length;j++){
                    
                   //    if(data_.user_info_all[i].id==checkedRowKeysRef.value[j]){
                   //      data_.user_info_ckd.push(data_.user_info_all[i]);
                           
                   //    }
                   // }
                   // };
                 },
        format_: "yyyy-MM-dd",
        ...toRefs(data_),
        pagination: paginationReactive,
        columns: createColumns({
          sendMail_1(rowData) {
            console.log(rowData.id, '详情');
            user_detail(rowData.id);
          },
          sendMail_2(rowData) {
            console.log(rowData.status, '编辑')
            user_redact(rowData.name,rowData.id);
          },
          sendMail_3(rowData) {
            console.log(rowData.id, '删除');
user_del(rowData.id);
          }
        }),
        showModal: showModalRef,
        showModal_redact: showModalRef_redact,
         showModal_add: showModalRef_add,
        model_redact,
model_add,
        formRef,
        formRef_redact,
        formRef_add,
        model: ref({
          inputValue: null,
          textareaValue: null,
          selectValue: null,
          multipleSelectValue: null,
          datetimeValue: null,

        }),
        rules: {
          inputValue: {
            required: false,
            trigger: ["blur", "input"],
            message: "请输入 inputValue"
          }
        },


        rules_redact: {
          inputValue: {
            required: true,
            trigger: ["blur", "input"],
            message: "请输入 分类名称"
          },
          radioGroupValue: {
            required: true,
            trigger: 'change',
            message: "请选择 性别"
          },
          national: {
            required: true,
            trigger: ["blur", "input"],
            message: "请输入 民族"
          },
          id_number: {
            required: true,
            validator(rule, value) {
              // 自定义验证  规则

              let reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
              if (!value) {
                return new Error('请输入身份证号')
              } else if (!reg.test(value)) {
                return new Error('身份证格式有误')
              }
              //  else if (Number(value) < 18) {
              //   return new Error('年龄应该超过十八岁')
              // }
              return true
            },


            trigger: ["blur", "input"],
            // message: 1>10?'请输入 身份证号':'666'
          },
          landscape: {
            required: true,
            trigger: ["blur", "input"],
            message: "请输入 政治面貌信息"
          },
          tel: {
            required: true,
            trigger: ["blur", "input"],
            validator(rule, value) {
              // 自定义验证  规则

              const regMobile =
                /^(((\d{3,4}-)?[0-9]{7,8})|(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8})$/
              if (!value) {
                return new Error('请输入电话号码')
              } else if (!regMobile.test(value)) {
                return new Error('电话号码格式有误')
              }
              //  else if (Number(value) < 18) {
              //   return new Error('年龄应该超过十八岁')
              // }
              return true
            },
            // message: "请输入 电话"
          },
          education: {
            required: true,
            trigger: ["blur", "input"],
            message: "请输入 学历"
          },
          pname: {
            required: true,
            trigger: ["blur", "input"],
            message: "请输入 所在项目"
          },
          graduation_date: {
            required: true,
            trigger: ["blur", "input"],
            message: "请输入 毕业时间"
          },
          school: {
            required: true,
            trigger: ["blur", "input"],
            message: "请输入 毕业学校"
          },
          major: {
            required: true,
            trigger: ["blur", "input"],
            message: "请输入 所学专业"
          },
          qname: {
            required: true,
            trigger: ["blur", "input"],
            message: "请输入 所在公司"
          },
          entry_time: {
            required: true,
            trigger: ["blur", "input"],
            message: "请输入 入职时间"
          },
          worker_date: {
            required: true,
            trigger: ["blur", "input"],
            message: "请输入 参加工作时间"
          },
          jobs: {
            required: true,
            trigger: ["blur", "input"],
            message: "请输入 工作岗位"
          },
          labor_type_: {
            required: true,
            trigger: ["blur", "input"],
            message: "请选择 用工形式"
          },
          status_: {
            required: true,
            trigger: ["blur", "input"],
            message: "请选择 人员状态"
          },
          address: {
            required: true,
            trigger: ["blur", "input"],
            message: "请输入 家庭住址"
          }
        },

        handleValidateButtonClick_redact(e) {
          // console.log(e.preventDefault(),'eeeeeeeeeeeeee');
          //     e.preventDefault();
          formRef_redact.value?.validate((errors) => {
            if (!errors) {
              // console.log(errors,'353');
              message.loading("信息修改中...");
              redact_userinfo();
            } else {
              // console.log(errors,'363');
              message.error("信息编辑不完整");
            }
          });
        },
        handleValidateButtonClick_add_cel(){
             showModalRef_add.value=false;
               model_add.inputValue=null;
        },
       
        handleValidateButtonClick_add(e) {
          // console.log(e.preventDefault(),'eeeeeeeeeeeeee');
          //     e.preventDefault();
          formRef_add.value?.validate((errors) => {
            if (!errors) {
              // console.log(errors,'353');
              message.loading("分类添加中...");
              add_userinfo();
            } else {
              // console.log(errors,'363');
              message.error("信息填写不完整");
            }
          });
        },
        // 个人信息 姓名 编辑时  赋值
        redact_input(v) {
          // console.log(v,'11');
          model_redact.inputValue = v;
          // console.log(model_redact.inputValue,'000');
        },
        // 个人信息 姓别 编辑时  赋值
        sex_radio(v) {
          // console.log(v,'11');
          model_redact.radioGroupValue = v;

        },
        redact_national(v) {
          model_redact.national = v;
        },
        redact_id_number(v) {
          model_redact.id_number = v;
        },
        redact_landscape(v) {
          model_redact.landscape = v;
        },
        redact_tel(v) {
          model_redact.tel = v;
        },
        redact_education(v) {
          model_redact.education = v;
        },
        redact_pname(v) {
          model_redact.pname = v;
        },
        redact_school(v) {
          model_redact.school = v;
        },
        redact_major(v) {
          model_redact.major = v;
        },
        redact_qname(v) {
          model_redact.qname = v;
        },
        redact_jobs(v) {
          model_redact.jobs = v;
        },
        redact_address(v) {
          model_redact.address = v;
        },
        generalOptions: ["在职", "离职"].map((v) => ({
          label: v,
          value: v
        })),
        generalOptions1: ["学员", "短期派遣" ,"长期派遣"].map((v) => ({
          label: v,
          value: v
        })),

        // onSelsct1(v, f) {
        //   message.info("onSelsct1 " + v);
        //   if (v == '长期派遣') {
        //     model_redact.labor_type_select = 1;
        //     console.log(model_redact.labor_type_select);
        //   } else if (v == '短期派遣') {
        //     model_redact.labor_type_select = 2;
        //   } else {
        //     model_redact.labor_type_select = 3;
        //   }
        // },
        // onSelsct2(v, f) {
        //   message.info("onSelsct2 " + v);
        //   if (v == '在职') {
        //     model_redact.status_select = 1;
        //   } else {
        //     model_redact.status_select = 2;
        //   }

        // },
        onChange1(v, f) {
          message.info("Change-1 " + f);
          model_redact.worker_date = f;
          // console.log(model_redact.worker_date);
        },
        onChange2(v, f) {
          message.info("Change-2 " + f);
          model_redact.entry_time = f;
          // console.log(model_redact.entry_time);
        },
        onChange3(v, f) {
          message.info("Change-3 " + f);
          model_redact.graduation_date = f;
          // console.log(model_redact.graduation_date);
        },
 user_dels(){
        // 批量删除
        user_del(checkedRowKeysRef.value);  
     },
     user_exl_checked(){
        
       if(checkedRowKeysRef.value.length==0){
           message.warning('请选中需要导出的名单')
       }else{
           message.loading( '正在导出...');
        
      // 导出文件名
      const filename = '人员信息';
      // 设置当前日期
      let time = new Date();
      let year = time.getFullYear();
       // return n < 10 ? '0' + n : ''+n;
      let month = time.getMonth() + 1<10?'0'+(time.getMonth() + 1):''+time.getMonth() + 1;
      let day = time.getDate();
      
      let name =filename+ year + "" + month + "" + day;
      						
      						
      						
      					
      // 通过id，获取导出的表格数据
      // console.log(XLXS);
      // const wb = XLSX.utils.table_to_book((data_.tableData), {
      //   raw: true,
      // });
      const wb = XLXS.utils.table_to_book(document.getElementById("list_checked"), {
        raw: true,
      });
       // console.log(wb,'wb');
      const wbout = XLXS.write(wb, {
        bookType: "xlsx",
        bookSST: true,
        type: "array",
      });
      try {
        FileSaver.saveAs(
          new Blob([wbout], {
            type: "application/octet-stream",
          }),
          name + ".xlsx"
        );
      } catch (e) {
        console.log(e);
      }
      return wbout;
       }
     },
     user_exl(){
     
   
         message.loading( '正在导出...');
        // 导出文件名
       const filename = '人员信息';
       // 设置当前日期
       let time = new Date();
       let year = time.getFullYear();
        // return n < 10 ? '0' + n : ''+n;
       let month = time.getMonth() + 1<10?'0'+(time.getMonth() + 1):''+time.getMonth() + 1;
       let day = time.getDate();
       
       let name =filename+ year + "" + month + "" + day;
       						
       						
       						
       					
       // 通过id，获取导出的表格数据
       // console.log(XLXS);
       // const wb = XLSX.utils.table_to_book((data_.tableData), {
       //   raw: true,
       // });
       const wb = XLXS.utils.table_to_book(document.getElementById("list_all"), {
         raw: true,
       });
        // console.log(wb,'wb');
       const wbout = XLXS.write(wb, {
         bookType: "xlsx",
         bookSST: true,
         type: "array",
       });
       try {
         FileSaver.saveAs(
           new Blob([wbout], {
             type: "application/octet-stream",
           }),
           name + ".xlsx"
         );
       } catch (e) {
         console.log(e);
       }
       return wbout;
     },
      }
    }
  }
</script>

<style scoped>
  :deep .n-data-table-th {
    text-align: center;
  }

  :deep .n-data-table-td {
    text-align: center;
  }
</style>
